<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>xTerminal</title>
		<link rel="stylesheet" href="xterm.css" />
		<script src="xterm.js"></script>
		<script src="fit.js"></script>
	</head>
	<style>
		html, body {
			height: 97%;
			width: 99%;
			background: #555;
		}
		
		#terminal-container {
			width: auto;
			height: 100%;
			
		}
	</style>
	<body>
		<div style="margin-bottom: 10px;">
			<input type="text" placeholder="Please input mac." id="mac" />
			<input type="button" value="Connect" id="connect" />
			<input type="button" value="Disconnect" id="disconnect" disabled="disabled" />
		</div>
		<span id="msg" style="display:none; color:red;"></span>

		<div id="terminal-container"></div>
		<script>
			var ws;
			function ab2str(buf) {
				return decodeURIComponent(escape(String.fromCharCode.apply(null, new Uint8Array(buf))));
			}

			function str2ab(str) {
				var buf = new ArrayBuffer(str.length);
				var bufView = new Uint8Array(buf);
				for (var i = 0, strLen = str.length; i < strLen; i++) {
					bufView[i] = str.charCodeAt(i);
				}
				return buf;
			}
			
			function new_session(mac) {
				ws = new WebSocket("ws://" + location.host + "?mac=" + mac);
				ws.onopen = function() {
					var term = new Terminal({
						focus: true,
						cursorBlink: true,
						screenKeys: true
					});
					term.on('data', function(data) {
						var binary_data = str2ab(data);
						ws.send(binary_data);
					});
					
					term.on('title', function(title) {
						document.title = title;
					});
					
					term.on('open', function() {
						window.addEventListener('resize', function(event) {
							term.fit();
						});
						
						term.fit();
					});
					
					term.open(document.getElementById('terminal-container'), true);
					
					ws.binaryType = 'arraybuffer';
					
					ws.onmessage = function(evt) {
						if (evt.data instanceof ArrayBuffer) {
							term.write(ab2str(evt.data));
						} else {
							document.getElementById("disconnect").disabled = false;
							var resp = JSON.parse(evt.data);
							if (resp.status == 'ok')
								document.getElementById("connect").value = "Connected";
							else {
								ws.close();
								
								var msg = document.getElementById("msg");
								msg.innerHTML = resp.reason;
								msg.style.display = "block";
							}
						}
					};
					
					ws.onclose = function () {
						var con = document.getElementById("connect");
						con.disabled = false;
						con.value = "Connect";
					
						document.getElementById("disconnect").disabled = true;
						term.destroy();
					};
				};
			}
		
			document.getElementById("connect").onclick = function() {
				var msg = document.getElementById("msg");
				msg.innerHTML = "";
				msg.style.display = "none";
				this.disabled = true;
				new_session(document.getElementById("mac").value);
			};
		
			document.getElementById("disconnect").onclick = function() {
				ws.close();
			}
		</script>
	</body>
</html>